<template>
  <div>
     <div class="page-header">
    <span class="header-title">编辑单元</span>
    <div class="header-divider"></div>
  </div>
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="小区名称" prop="communityname">
        <el-input v-model="form.communityname"></el-input>
      </el-form-item>
      <el-form-item label="单元名称" prop="unitname">
        <el-input v-model="form.unitname"></el-input>
      </el-form-item>
      <el-form-item label="栋数" prop="unitnum">
        <el-input v-model="form.unitnum" type="number"></el-input>
      </el-form-item>
      <el-form-item label="状态选择" prop="unitstatus">
        <el-select v-model="form.unitstatus" placeholder="请选择状态">
          <el-option label="已建成" :value="1"></el-option>
          <el-option label="未建成" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="咨询问候" prop="unitcontext">
        <!-- 添加prop用于校验 -->
        <vue-ueditor-wrap
          v-model="form.unitcontext"
          :config="ueditorConfig"
        ></vue-ueditor-wrap>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        
        communityname: "",
        unitname: "",
        unitnum: "",
       unitstatus:"",
        unitcontext: "",
        token: "",
      },
      // 表单校验规则
      rules: {
        communityname: [
          { required: true, message: "请输入小区名称", trigger: "blur" },
          {
            min: 2,
            max: 50,
            message: "长度在 2 到 50 个字符",
            trigger: "blur",
          },
        ],
        unitname: [
          { required: true, message: "请输入单元名称", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        unitnum: [
          { required: true, message: "请输入栋数", trigger: "blur" },
        
        ],
        unitstatus: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
        unitcontext: [
          {
            required: true,
            message: "请输入咨询问候语",
            trigger: ["blur", "change"],
          },
          {
            min: 5,
            max: 500,
            message: "长度在 5 到 500 个字符",
            trigger: ["blur", "change"],
          },
        ],
      },
      ueditorConfig: {
  UEDITOR_HOME_URL: "/UEditor/",
  initialFrameHeight: 300,
  // 修正语言路径 - 确保能正确找到lang目录
  langPath: "/UEditor/lang/", 
  lang: "zh-cn",
  // 其他配置...
}
    };
  },

  created() {
    this.form.token = sessionStorage.getItem("token");
  },
  methods: {
    onSubmit() {
   this.$refs.form.validate((valid) => {
    if (valid) {
      // 验证通过，显示确认对话框
      this.$confirm('确定要新增该表单吗？', '确认新增', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定，执行提交逻辑
        console.log("提交表单", this.form);
        this.$axios.post(`/house/addunitList`, this.form).then((res) => {
          console.log(res);
          this.$message({
            type: "success",
            message: "添加成功",
          });
          this.$router.push("/house/unit");
        }).catch(error => {
          // 处理请求失败情况
          this.$message.error('添加失败，请稍后重试');
          console.error(error);
        });
      }).catch(() => {
        // 用户点击取消，不执行提交
        this.$message({
          type: 'info',
          message: '已取消新增'
        });
      });
    } else {
      // 验证失败
      console.log("表单验证失败");
      return false;
    }
  });
    },
    goBack() {
      this.$router.push("/house/unit");
    },
  },
};
</script>

<style scoped>
.page-header {
  display: flex;
  align-items: center;
  background-color: #f8f9fa; /* 浅灰背景，可根据设计调整 */
  border-bottom: 1px solid #e9ecef;
  padding: 10px 20px;
  margin-bottom: 20px;
}

.header-title {
  font-size: 16px;
  font-weight: bold;
  color: #409eff; /* 蓝色，匹配 Element 主色调 */
}

.header-divider {
  flex: 1;
  height: 1px;
  background-color: #e9ecef;
  margin: 0 10px;
}
</style>